<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息查询</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
    <style>
        h2 {
            margin-top: 20px;
            margin-left: 50px;
        }

        .a {
            margin-left: 1100px;
            margin-top: 10px;
            font-size: 25px;


        }
    </style>
</head>
<body>

<h2>学生信息签到系统</h2>

<p class="a">————努力学习，天天向上</p>




<!-- layui 渲染数据 -->
<div class="panel-body">
    <table class="layui-hide" id="customerList" lay-filter="test">

    </table>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js"></script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>

        <a class="layui-btn layui-btn-sm" href="/insert">
            <i class="glyphicon glyphicon-plus"></i>签到
        </a>


    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" data-toggle="modal" data-target="#update_myModal">处理</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.config({
        base: "js/"
    }).use(['table', 'layer', 'form', 'jquery'], function () {
        var table = layui.table,
            form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            $ = layui.jquery;

        //全查询
        table.render({
            elem: '#customerList'
            , url: '/find'
            , toolbar: '#toolbarDemo'    //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', {  //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , page: true
            /**
             * 打印数据到控制台
             **/
            , parseData: function (res) {
                console.log(res)
            }

            /*,totalRow: true //开启合计行*/
            , cols: [
                [
                    //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: '编号', width: 110, fixed: 'left', unresize: true, sort: true, align: 'center'}
                    , {field: 'name', title: '姓名', sort: true, align: 'center'}
                    /*, {field: 'sign', title: '状态', sort: true, align: 'center'}*/
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center'}
                ]
            ]
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
        });

        //监听行工具事件   删除
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            console.log(obj)
            console.log("data--" + data.id)
            if (obj.event === 'del') {
                layer.confirm('真的要删除这条数据吗？', function (index) {

                    $.ajax({
                        type: "Delete",
                        url: "/car_delete",
                        data: {
                            id: data.id
                        }
                        , dataType: "json",   /*服务器返回的数据格式*/
                        success: function (a) {
                            console.log(a)
                            obj.del();
                            layer.close(index);
                            layer.msg('删除成功', {icon: 1, time: 1000});
                        }
                    })
                });


                //修改  数据回显
            } else if (obj.event === 'edit') {
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                $("#u_id").val(data.id);
                $("#u_area").val(data.area);
                $("#u_car_type").val(data.carType);
                $("#u_move_date").val(data.moveDate);
                $("#u_contact").val(data.contact);
                $("#u_phone").val(data.phone);
                $("#u_orders_status").val(data.ordersStatus);
            }
        });
    });
</script>


<script type="text/javascript">

    $(function () {

        $("body").on("click","#upload",function(){
            //将数据打包到formData对象中
            var formData = new FormData();
            formData.append("classes",$("#classes").val());
            formData.append("nameListExcel",$("#nameList")[0].files[0]);

            $.ajax({
                type:"post",
                url:"/upload",
                //dataType:"json",
                data:formData,
                processData: false,
                contentType: false,
                success:function(data){
                    console.log(data);
                    if(data=="ok"){
                        alert("上传成功，即将刷新页面")
                        //刷新当前页面
                        location.reload();
                    }else {
                        alert("上传失败，请重新上传")
                    }
                }
            });
        })
    })

</script>

</body>

</html>